<template>
  <div>
    <div class="orderDetalis">
      <div class="toubu">
        <p @click="fanhui">我的订单</p>
        &nbsp; > &nbsp;
        <p>订单详情</p>
      </div>
      <div class="caozuo">
        <div class="daojishi">
          <p v-if="activeNum == 1">待支付</p>
          <p v-if="activeNum == 1">剩余结算时间：{{ h }}:{{ m }}:{{ s }}</p>
        </div>
        <div class="anjian">
          <button v-if="activeNum == 1" @click="quxiao">取消订单</button>
          <button>在线客服</button>
          <button v-if="activeNum == 1" @click="quzjifu">去支付</button>
        </div>
      </div>

      <div class="jingdutiao">
        <el-steps :space="200" :active="activeNum" finish-status="success">
          <el-step title="提交订单"></el-step>
          <el-step title="付款成功"></el-step>
          <el-step title="等待收货"></el-step>
          <el-step title="已完成"></el-step>
        </el-steps>
      </div>

      <div class="dindanshangp">
        <div class="dindanshangp-tou">订单号：48711111111</div>
        <div class="dindanshangp-checked">
          <div class="left-box">
            <ul>
              <li v-for="(item, index) in dindanLists.dindannei" :key="index">
                <div class="checked-left">
                  <div class="picture-dindan">
                    <img :src="item.imageUrl" />
                  </div>
                  <div class="text-dindan">
                    <p>{{ item.name }}{{ item.text }}</p>
                    <p>{{ item.color }}</p>
                    <span>{{ item.activity }}</span>
                  </div>
                </div>
                <div class="checked-right">
                  <p>￥{{ item.originalPrice }}.00</p>
                  <p>x{{ item.nums }}</p>
                </div>
              </li>
            </ul>
          </div>
          <div class="right-box">{{ dindanLists.dindantou.state }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["dindan"],
  data() {
    return {
      dindanLists: null,
      dindanlist: null,
      activeNum: 1,
      times: +new Date(),
      future: 0,
      h: 3,
      m: 0,
      s: 0,
    };
  },
  methods: {
    fanhui() {
      this.$emit("fanhui");
    },
    quxiao() {
      this.dindanlist[this.dindan].dindantou.state = "已取消";
      window.localStorage.setItem(
        "dindanList",
        JSON.stringify(this.dindanlist)
      );
      this.activeNum = -1;
    },
    quzjifu() {
      this.dindanlist[this.dindan].dindantou.state = "待收货";
      window.localStorage.setItem(
        "dindanList",
        JSON.stringify(this.dindanlist)
      );
      this.activeNum = 3;
    },
  },
  created() {
    this.dindanlist = JSON.parse(window.localStorage.getItem("dindanList"));
    this.dindanLists = this.dindanlist[this.dindan];
    if (this.dindanLists.dindantou.state == "已完成") {
      this.activeNum = 4;
    } else if (this.dindanLists.dindantou.state == "待收货") {
      this.activeNum = 3;
    } else {
      this.activeNum = 1;
    }

    setInterval(() => {
      //点进订单详情的时间
      this.times = +new Date();
      // this.dindanlist[this.dindan].id 下单的时间
      this.future =
        (this.dindanlist[this.dindan].id + 10800000 - this.times) / 1000;
      this.h = parseInt((this.future / 60 / 60) % 24);
      this.h = this.h < 10 ? "0" + this.h : this.h;
      this.m = parseInt((this.future / 60) % 60);
      this.m = this.m < 10 ? "0" + this.m : this.m;
      this.s = parseInt(this.future % 60);
      this.s = this.s < 10 ? "0" + this.s : this.s;
    }, 1000);
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/css/public.scss";
@import "../assets/css/orderDetails.scss";
</style>